<template>
  <div id="eqMaintainStandardDiv">
    <Breadcrumb content="保养标准" />
    <div class="bodyContent">
      <vxe-toolbar perfect>
        <template #buttons>
          <vxe-input style="width: 180px" v-model="searchForm.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="findMaintainStandardList" @keyup="keyupEnter" @search-click="findMaintainStandardList()"></vxe-input>
          <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="rloading" @click="findMaintainStandardList"></vxe-button>
          <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="新增" @click="addMaintainStandard"></vxe-button>
          <vxe-button type="text" class="button-blue" icon="vxe-icon-save" content="保存" @click="saveMaintainStandardList"></vxe-button>
          <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除" @click="deleteMaintainStandard"></vxe-button>
        </template>
      </vxe-toolbar>

      <div class="tableBox">
        <vxe-table ref="maintainStandardTableRef" class="mytable-scrollbar" border="inner" align="center" height="auto" :row-config="{ isCurrent: true, isHover: true }" :data="standardList" :loading="rloading" :column-config="{ resizable: true }" :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }" resizable show-overflow keep-source>
          <vxe-column type="checkbox" width="30"></vxe-column>

          <vxe-column field="standardCode" title="保养编号" width="200" :edit-render="{}">
            <template #edit="{ row, rowIndex, column }">
              <vxe-input v-model="row.standardCode" placeholder="" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="standardName" title="保养名称" width="200" :edit-render="{}">
            <template #edit="{ row, rowIndex, column }">
              <vxe-input v-model="row.standardName" placeholder="" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="position" title="保养部位" :edit-render="{}">
            <template #edit="{ row, rowIndex, column }">
              <vxe-input v-model="row.position" placeholder="" type="text"></vxe-input>
            </template>
          </vxe-column>

          <vxe-column field="standard" title="保养标准" :edit-render="{}">
            <template #edit="{ row, rowIndex, column }">
              <vxe-textarea v-model="row.standard" placeholder="" :autosize="{ minRows: 1, maxRows: 10 }" clearable></vxe-textarea>
            </template>
          </vxe-column>

          <vxe-column field="seq" title="序号" width="150" :edit-render="{}">
            <template #edit="{ row, rowIndex, column }">
              <vxe-input v-model="row.seq" type="number"></vxe-input>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import moment from 'moment';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示
import { isEmpty } from 'lodash';

let standardList: any = reactive([]);
let rloading = ref(false);

let searchForm = {
  searchValue: ''
};

onMounted(() => {
  findMaintainStandardList();
});

// 获取左侧仪器表格数据+刷新+右侧表格数据
function findMaintainStandardList() {
  rloading.value = true;
  standardList.length = 0; //放入数据前清空数据
  const url = '/api/eq/eqMaintainStandard/findMaintainStandardList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: { searchValue: searchForm.searchValue }
    })
    .then((res: any) => {
      standardList.push(...res.data);
      rloading.value = false;
    })
    .catch((err: any) => {
      rloading.value = false;
      VxeMessage('获取右侧质控项目表格数据异常', VxeNotifyType.error);
    });
}

function addMaintainStandard() {
  const record: any = {
    id: '',
    standardCode: '',
    standardName: '',
    position: '',
    standard: '',
    seq: 1
  };
  standardList.push(record);
}

// 左侧保存
async function saveMaintainStandardList() {
  let $Xtable = proxy.$refs.maintainStandardTableRef;
  if ($Xtable) {
    // 表格实例表用该方法拿到有id的为修改
    const updateRecords = await $Xtable.getUpdateRecords().filter((p: any) => {
      return p.id && p.id !== '';
    });
    // 拿到数组中没有id的数据为新增
    const InsertRecords = standardList.filter((e: any) => {
      return !e.id || e.id === '';
    });

    const sveOrupdateRemarks = [] as any[];
    updateRecords.forEach((e: any) => {
      const iIRemark: any = {
        id: e.id,
        standardCode: e.standardCode,
        standardName: e.standardName,
        position: e.position,
        standard: e.standard,
        seq: e.seq,
      };

      sveOrupdateRemarks.push(iIRemark);
    });
    InsertRecords.forEach((e: any) => {
      const iIRemark: any = {
        id: e.id,
        standardCode: e.standardCode,
        standardName: e.standardName,
        position: e.position,
        standard: e.standard,
        seq: e.seq,
      };
      sveOrupdateRemarks.push(iIRemark);
    });

    if (sveOrupdateRemarks.length > 0) {
      const url = '/api/eq/eqMaintainStandard/saveOrUpdateMaintainStandard';
      const obj: any = {};
      obj.eqMaintainStandardList = sveOrupdateRemarks;
      proxy.$http
        .post(url, obj)
        .then((res: any) => {
          VxeMessage('更新成功', VxeNotifyType.success);
          setTimeout(() => {
            findMaintainStandardList();
          }, 50);
        })
        .catch((err: any) => {
          VxeMessage('更新失败', VxeNotifyType.success);
        });
    } else {
      VxeMessage('无添加或修改数据', VxeNotifyType.error);
    }
  } else {
    return;
  }
}
// 左侧删除
function deleteMaintainStandard() {
  const sltConvertRemarks = (proxy.$refs.maintainStandardTableRef as any).getCheckboxRecords();
  if (!(sltConvertRemarks.length > 0)) {
    VxeMessage('请勾选要删除的数据', VxeNotifyType.info);
  } else {
    proxy
      .$confirm('确定要删除当前勾选的数据？', '提示', {
        cancelButtonClass: 'cancel-button',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(async () => {
        //后台删除数据
        const delMaintainStandardList = sltConvertRemarks.filter((p: any) => !isEmpty(p.id));
        if (delMaintainStandardList.length > 0) {
          const data = { eqMaintainStandardList: delMaintainStandardList };
          const url = '/api/eq/eqMaintainStandard/batchDeleteMaintainStandardList';
          proxy.$http
            .post(url, data)
            .then((res: any) => {
              findMaintainStandardList(); // 获取检验仪器表格数据
              VxeMessage(res.status.msg, VxeNotifyType.success);
            })
            .catch((err: any) => {
              VxeMessage(err, VxeNotifyType.error);
            });
        }
        //页面删除未保存的数据
        const removeMaintainStandardList = sltConvertRemarks.filter((p: any) => isEmpty(p.id));
        if (removeMaintainStandardList.length > 0) {
          // 删除的新增的空白数据 不走接口
          let $Xtable = proxy.$refs.maintainStandardTableRef;
          if ($Xtable) {
            for (const removeRow of removeMaintainStandardList) {
              const index = standardList.findIndex((item) => item == removeRow);
              standardList.splice(index, 1);
            }
          }
        }
      })
      .catch((err: any) => {
        // VxeMessage(err, VxeNotifyType.error);
      });
  }
}
</script>

<style lang="scss" scoped>
#eqMaintainStandardDiv {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);

    // 附加按钮间距
    .button-blue,
    .button-red {
      margin: 5px 0 5px 5px;
    }

    //右侧质控项目表格
    .tableBox {
      height: calc(100% - 40px);
      background-color: $base-white;
    }
  }
}
</style>
